<!--
 * @Description:基础事件对象显示
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-07 18:05:44
 -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>基础事件对象显示</title>
	<style>
		#div1 {
			width: 400px;
			height: 300px;
			background: #ccc;
			display: none;
		}
	</style>

</head>
<script>
	window.onload = function () {
	var oBtn = document.getElementById("btn1")
	var oDiv= document.getElementById("div1")

		oBtn.onclick = function (ev) {
			var oEvent = ev || event
			oDiv.style.display='block'
			oEvent.cancelBubble=true
	}
	document.onclick=function(){
		oDiv.style.display='none'
	}
}
</script>

<body>
	<input type="button" value="显示" id="btn1">
	<div id="div1"></div>
</body>

</html>